<template>
  <el-form label-width="120px" :rules="rules" :model="form" ref="ruleFormRef">
    <el-row :gutter="20"  >
      <el-col :span="6">
        <el-button type="success" @click="CreatePipe(ruleFormRef)" style="float: right;margin-right: 20px">保存</el-button>
        <el-form-item label="流水线名称" prop="name" >
          <el-input v-model="form.name"/>
        </el-form-item>

        <el-form-item label="当前项目" prop="name">
          <el-input v-model="form.project_name" width="200px" disabled></el-input>
        </el-form-item>

        <el-form-item label="流水线类型" prop="name">
          <el-select v-model="form.envid" placeholder="请选择流水线类型">
            <el-option v-for="item in env_list" :key="item" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="B版本" prop="b_version">
          <el-input v-model="form.b_version"/>
        </el-form-item>

        <el-form-item label="统一环境" prop="branch">
          <el-switch v-model="form.ubify_env"></el-switch>
        </el-form-item>

        <el-form-item label="环境" prop="envid" v-if="form.ubify_env">
          <el-select v-model="form.envid" placeholder="请选择运行环境">
            <el-option v-for="item in env_list" :key="item" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="统一分支" prop="branch">
          <el-tooltip :content="'当前分支：'+form.branch" placement="top-start">
            <el-switch v-model="form.ubify_branch"></el-switch>
          </el-tooltip>
        </el-form-item>

        <el-form-item label="代码分支" v-if="form.ubify_branch">
          <el-input v-model="form.branch"/>
        </el-form-item>

        <el-form-item label="定时任务" prop="iscron">
          <el-switch v-model="form.switch"></el-switch>
        </el-form-item>

        <template v-if="form.switch">
          <el-form-item label="cron表达式" prop="cron">
            <el-input v-model="form.spec" style="width: 200px"></el-input>
            <el-tooltip content="cron表达式选择器" placement="top-start">
              <el-switch v-model="edit" style="display: inline" :active-action-icon="View"
                         :inactive-action-icon="Hide">
              </el-switch>
            </el-tooltip>
          </el-form-item>
        </template>
      </el-col>
      <el-col :span="10">
        <TaskCheckBox v-model:taskgroups="taskgroups" ></TaskCheckBox>
      </el-col>
      <el-col :span="8">
      </el-col>
    </el-row>
  </el-form>
  <el-dialog v-model="edit" title="CRON表达式生成器" width="25%" center class="dialog" draggable top="10vh" model=false>
    <Cron v-model:value="form.spec"></Cron>
  </el-dialog>

</template>

<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue';
import {env} from '../../laboratory/env_api'
import {pipeline} from '../js/pipeline'
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {checkSpecialKey} from '@/utils/str'
import TaskCheckBox from './pipe_checkbox.vue'
import {Hide, View} from "@element-plus/icons-vue";
import Cron from "@/components/common/Cron.vue";
import {useUserStore} from '@/pinia/modules/user'
import {useRoute} from "vue-router";

const create = ref(true)
const store = useUserStore()
const route = useRoute()
const edit = ref(false)
const env_list = ref([])
const param = ref({})


const taskgroups = ref([])
const form = ref({
  name: "",
  envid:"",
  c_version: "",
  b_version: "b134",
  ubify_branch:false,
  branch: "main",
  email: "",
  switch: false,
  spec: "",
  ubify_env:false,
  project_name: "",
  group:taskgroups,
  param:JSON.stringify(param.value),
})


let page = reactive({"page": 1, "size": 15, "total": 0, id: undefined})
const project = ref({name: "", id: ""})


onMounted(async () => {
  await ListEnv()

  if (route.query.pipename != undefined) {
    create.value = false
    let taskname = route.query.pipename
    let info = await pipeline.Detail(taskname)

    form.value.name = info.data.name
    form.value.switch = info.data.switch
    form.value.spec = info.data.spec
    form.value.ubify_env = info.data.ubify_env
    form.value.spec =info.data.spec
    form.value.project_name = info.data.Project.name

    taskgroups.value = await info.data.group
    console.log(taskgroups.value)
  }
})

const ListEnv = async  ()=>{
  var envs = await env.List(page)
  env_list.value = envs.data
}

interface RuleForm {
  name: string
}

const ruleFormRef = ref<FormInstance>()

const rules = reactive(<FormRules<RuleForm>>({
  name: [
    {required: true, message: '请输入流水线名称', trigger: 'blur'},
    {min: 3, max: 16, message: '长度在3到16之间', trigger: 'blur'},
    {validator: checkSpecialKey, message: "不能包含特殊字符,请使用_分割字符", trigger: "blur"}
  ],
  b_version: [
    {required: true, message: '请输入B版本', trigger: 'blur'},
    {min: 3, max: 6, message: '长度在3到6之间', trigger: 'blur'},
    {validator: checkSpecialKey, message: "不能包含特殊字符,请使用_分割字符", trigger: "blur"}
  ],
}))

const CreatePipe = async (formEl: FormInstance | undefined) => {
  if (form.value.group.length == 0){
    ElMessage.info("未添加任务组");
    return
  }
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (create.value == true) {
        pipeline.Create(form.value)
      }else{
        pipeline.Modify(form.value)
      }
      return
    } else {
      return;
    }
  })
}

</script>

<style scoped>

</style>